<template>
  <el-dialog title="宿舍分配"
             :close-on-click-modal="false"
             :visible.sync="dialogShow"
             width="640px"
             :before-close="handleClose">
    <el-form :model="dialogForm"
             ref="dialogForm"
             :rules="rules"
             label-width="100px">
      <el-form-item label="学生信息：">
        <div>{{dialogDetail.studentName}}（{{dialogDetail.studentSn}}）{{$transSexUnknow(dialogDetail.gender)}} {{dialogDetail.studentType}}</div>
        <div>{{dialogDetail.collegeName}}>{{dialogDetail.majorName}}>{{dialogDetail.gradeName}}级>{{dialogDetail.className}}</div>
      </el-form-item>
      <el-form-item label="当前入住："
                    v-if="type_ !== 1">
        <div>{{dialogDetail.beforBedInfo || '--'}}</div>
      </el-form-item>
      <el-form-item label="分配入住："
                    prop="bedId">
        <el-select v-model="dialogForm.schoolAreaId"
                   placeholder="--校区--"
                   @change="cascade('campus')"
                   size="small">
          <el-option v-for="(item, index) in campus"
                     :key="index"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="dialogForm.campusId"
                   placeholder="--园区--"
                   @change="cascade('gardens')"
                   size="small">
          <el-option v-for="(item, index) in gardens"
                     :key="index"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="dialogForm.buildingId"
                   @change="cascade('buildings')"
                   placeholder="--楼栋--"
                   size="small">
          <el-option v-for="(item, index) in buildings"
                     :key="index"
                     :label="item.number + '-' + item.unitNumber"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="dialogForm.roomId"
                   @change="cascade('rooms')"
                   placeholder="--房间--"
                   size="small">
          <el-option v-for="(item, index) in rooms"
                     :key="index"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="dialogForm.bedId"
                   placeholder="--床位--"
                   size="small">
          <el-option v-for="(item, index) in beds"
                     :key="index"
                     :label="item.bedNumber"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="handleClose"
                 size="small">取 消</el-button>
      <el-button type="primary"
                 @click="sure"
                 :loading="loading"
                 size="small">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  listSchoolAreaByUserUsingGET,
  listCampusBySchoolAreaIdAndUserUsingGET,
  listBuildingByCampusIdAndUserUsingGET,
  listRoomByBuildingIdAndUserUsingGET,
  listCanUseBedByRoomIdUsingGET,
  adjustDormitoryUsingPOST
} from '@api/auto'
import { updateFiling, _getFiling } from '@api/systemManage'
export default {
  props: {
    dialogShow: Boolean,
    dialogDetail: Object,
    type_: Number,
    stepData: Array,
    query: Function
  },
  data () {
    const checkBedId = (rule, value, callback) => {
      if (!this.dialogForm.bedId) {
        return callback(new Error('请选择调整宿舍床位'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      rules: {
        bedId: [
          { required: true, validator: checkBedId, trigger: 'blur' }
        ]
      },
      campus: [],
      gardens: [],
      buildings: [],
      rooms: [],
      beds: [],
      cascade (type) {
        const actions = new Map([
          ['campus', 'changeCampus'],
          ['gardens', 'changeGardens'],
          ['buildings', 'changeBuildings'],
          ['rooms', 'changeRooms']
        ])
        let temp = actions.get(type)
        this[temp]()
      },
      // 校区change
      changeCampus () {
        this.dialogForm.campusId = ''
        this.dialogForm.buildingId = ''
        this.dialogForm.floorId = ''
        this.gardens = []
        this.buildings = []
        this.rooms = []
        this.beds = []
        this.listCampusBySchoolAreaIdAndUserUsingGET(this.dialogForm.schoolAreaId)
      },
      // 园区change
      changeGardens () {
        this.dialogForm.buildingId = ''
        this.dialogForm.floorId = ''
        this.buildings = []
        this.rooms = []
        this.beds = []
        this.listBuildingByCampusIdAndUserUsingGET(this.dialogForm.campusId)
      },
      // 楼栋change
      changeBuildings () {
        this.dialogForm.floorId = ''
        this.rooms = []
        this.beds = []
        this.listRoomByBuildingIdAndUserUsingGET(this.dialogForm.buildingId)
      },
      // 房间change
      changeRooms () {
        this.dialogForm.floorId = ''
        this.beds = []
        this.listCanUseBedByRoomIdUsingGET(this.dialogForm.roomId)
      },
      dialogForm: {
        schoolAreaId: null,
        campusId: null,
        buildingId: null,
        roomId: null,
        bedId: null
      }
    }
  },
  created () {
    this.listSchoolAreaByUserUsingGET()
  },
  methods: {
    // 获取校区
    listSchoolAreaByUserUsingGET () {
      listSchoolAreaByUserUsingGET().then(res => {
        this.campus = res.data
      })
    },
    // 获取园区
    listCampusBySchoolAreaIdAndUserUsingGET (id) {
      listCampusBySchoolAreaIdAndUserUsingGET(id).then(res => {
        this.gardens = res.data
      })
    },
    // 获取楼栋
    listBuildingByCampusIdAndUserUsingGET (id) {
      listBuildingByCampusIdAndUserUsingGET(id).then(res => {
        // this.buildings = res.data
        this.buildings = res.data.filter(item => {
          console.log(this.dialogDetail.gender, 'this.dialogDetail.gender')
          return item.gender === this.dialogDetail.gender || item.gender === 0
        })
      })
    },
    // 获取房间
    listRoomByBuildingIdAndUserUsingGET (id) {
      listRoomByBuildingIdAndUserUsingGET(id).then(res => {
        this.rooms = res.data
      })
    },
    // 获取可用床位
    listCanUseBedByRoomIdUsingGET (id) {
      listCanUseBedByRoomIdUsingGET(id).then(res => {
        this.beds = res.data
      })
    },
    handleClose () {
      this.$refs.dialogForm.resetFields()
      this.loading = false
      this.dialogForm = {
        schoolAreaId: null,
        campusId: null,
        buildingId: null,
        roomId: null,
        bedId: null
      }
      this.$emit('handleClose')
    },
    sure () {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.loading = true
          _getFiling(this.dialogDetail.id).then(res => {
            if (res.data.filing === 1) {
              this.$message.error('已经分配,不得重复分配')
              this.handleClose()
              this.query()
            } else {
              let body = {
                adjustType: this.type_ === 1 ? 1 : 2,
                beforPlace: this.dialogDetail.beforBedInfo,
                bedId: this.dialogForm.bedId,
                sn: this.dialogDetail.studentSn
              }
              adjustDormitoryUsingPOST(body).then(res => {
                let body = {
                  filing: 1, beforBedInfo: this.dialogDetail.beforBedInfo, afterBedInfo: res.data
                }
                updateFiling(this.dialogDetail.id, body).then(res_ => {
                  this.handleClose()
                  this.query()
                  this.$message.success('操作成功')
                }).catch(res => {
                  this.loading = false
                })
              }).catch(res => {
                this.loading = false
              })
            }
          }).catch(res => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
